<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 目录数据 -->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-select
            v-model="directoryInfo"
            class="m-2"
            placeholder="请选择"
            @change="directoryChange"
          >
            <el-option
              v-for="item in directoryList"
              :key="item.directoryId"
              :label="item.directoryName"
              :value="item.directoryId"
            />
          </el-select>
        </div>
        <br />
        <div class="head-container">
          <el-input
            v-model="menuName"
            placeholder="请输入"
            clearable
            prefix-icon="Search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="menuOptions"
            :props="{ label: 'menuName', children: 'children' }"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="menuTreeRef"
            node-key="menuId"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!-- 列表数据 -->
      <!-- 模型数据 -->
      <el-col :span="20" :xs="24">
        <LowcodeTable ref="lowcodeTableRef" v-show="open"></LowcodeTable>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="LowcodeDataList">
import { listDirectory } from "@/api/lowcode/directory";
import { listDirectoryMenu } from "@/api/lowcode/directoryMenu";
import { getTableModel } from "@/api/lowcode/model";
import LowcodeTable from "@/components/LowcodeTable/index.vue"

const { proxy } = getCurrentInstance();

const directoryList = ref([]);
const directoryInfo = ref([]);
const open = ref(false);
const menuName = ref("");
const menuOptions = ref(undefined);
const lowcodeTableRef = ref(null)

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.menuName.indexOf(value) !== -1;
};

/** 根据名称筛选部门树 */
watch(menuName, (val) => {
  proxy.$refs["menuTreeRef"].filter(val);
});

/** 加载菜单目录 */
function getListDirectory() {
  listDirectory({ status: '0' }).then((response) => {
    directoryList.value = response.rows;
  });
}

/** 菜单目录更改事件 */
function directoryChange(value) {
  getMenuTree(value);
}

/** 查询菜单下拉树结构 */
function getMenuTree(value) {
  listDirectoryMenu({ directoryId: value, status: "0" }).then((response) => {
    menuOptions.value = proxy.handleTree(response.data, "menuId");
  });
}

/** 菜单树点击事件 */
function handleNodeClick(data) {
  // 是模型的情况下处理数据
  if (data.type == "1") {
    getTableModel(data.modelId).then((response) => {
      open.value = true
      lowcodeTableRef.value.initTable(response.data)
    });
  }
}

getListDirectory();
</script>
 